import React, { Component } from "react";

export default class StateandLifecycle extends Component {

    render() {
        return <Counter />
    }
}

class Counter extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count: 0, count1: 0 }
    }

    increment() {
        /* 这样是存在问题的 */
        console.log("increment!")
        this.setState({ count: this.state.count + 1 })
        this.setState({ count: this.state.count + 1 })
        this.setState({ count: this.state.count + 1 })
    }

    inc() {
        // setState可以接收一个state参数的函数来更新状态
        this.setState((state) => { return { count1: state.count1 + 1 } })
    }

    inc3() {
        console.log("inc@")
        this.inc()
        this.inc()
        this.inc()
    }

    render() {
        return <div>
            <h1>{this.state.count}</h1>
            <button onClick={() => this.increment()}>add 3 times</button>


            <h2>{this.state.count1}</h2>
            <button onClick={() => this.inc3()}>add 2 times by right method</button>
        </div>
    }
}